<template>
    <div style="position:relative;">
        <Menu :theme="theme3" :active-name="activename" width="250px" @on-select = "handletopbar">
            <MenuItem v-for="(item,key) in menu" :key = "key" :name="item.name">
                {{item.name}}
            </MenuItem>
        </Menu>
        <div class="routercontent">
            <transition name="slide-right" mode="out-in">
                <router-view></router-view>
            </transition>
        </div>
    </div>
</template>
<script>
import { ipcRenderer } from "electron";
export default {
  data() {
    return {
      menu: [
        {
          name: "BITTREX",
          id: "BITTREX"
        },
        {
          name: "HUOBI",
          id: "HUOBI"
        },
        {
          name: "GATEIO",
          id: "GATEIO"
        },
        {
          name: "BINANCE",
          id: "BINANCE"
        },
        {
          name: "OKCOIN",
          id: "OKCOIN"
        }
      ],
      theme3: "light",
      activename: "BITTREX"
    };
  },
  created() {
    
	  this.$router.replace({
		name: "APIsetting",
		params: { id: this.menu[0].id }
	  });
  },
  methods: {
    getMessage: function(event, type) {
      ipcRenderer.send(event, type);
    },
    handletopbar: function(name) {
	  this.$store.commit('apisetting_name',name);
      this.$router.push({ name: "APIsetting", params: { id: name } });
      this.getMessage("getApisetting", name);
    }
  },
  destroyed() {
    ipcRenderer.removeAllListeners("getTrans_web");
  }
};
</script>
<style scoped>
.routercontent {
  position: absolute;
  width: 100%;
  padding-left: 260px;
  top: 0px;
  background: #f7f7f7;
}
.slide-left-enter,
.slide-right-leave-active {
  opacity: 0;
  -webkit-transform: translate(50px, 0);
  transform: translate(50px, 0);
}
.slide-left-leave-active,
.slide-right-enter {
  opacity: 0;
  -webkit-transform: translate(-50px, 0);
  transform: translate(-50px, 0);
}
</style>
